<template>
  <view class="detail-page">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <image src="/static/svg/arrow-left.svg" class="back-icon" />
      </view>
      <view class="title">活动详情</view>
      <view class="share-btn">
        <image src="/static/svg/share.svg" class="share-icon" />
      </view>
    </view>

    <!-- 活动图片轮播 -->
    <view class="image-container">
      <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
        <swiper-item v-for="(image, index) in activity.images" :key="index">
          <view class="swiper-item">
            <view class="placeholder-img" :style="{ background: image.color }">
              <text>{{ activity.title }}{{ index + 1 }}</text>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 活动信息 -->
    <view class="activity-info">
      <view class="main-info">
        <view class="activity-title">{{ activity.title }}</view>
        <view class="status-container">
          <view class="status-tag" :style="{ background: activity.statusColor }">
            {{ activity.status }}
          </view>
          <view class="price">
            <text class="price-label">费用：</text>
            <text class="price-value">{{ activity.price }}</text>
          </view>
        </view>
      </view>

      <!-- 时间地点信息 -->
      <view class="time-location">
        <view class="info-item">
          <image src="/static/svg/calendar.svg" class="info-icon" />
          <text class="info-text">{{ activity.time }}</text>
        </view>
        <view class="info-item">
          <image src="/static/svg/clock.svg" class="info-icon" />
          <text class="info-text">{{ activity.duration }}</text>
        </view>
        <view class="info-item">
          <image src="/static/svg/map-pin.svg" class="info-icon" />
          <text class="info-text">{{ activity.location }}</text>
        </view>
      </view>

      <!-- 主办方信息 -->
      <view class="organizer-info">
        <view class="organizer-avatar">
          <view class="avatar-circle" :style="{ background: activity.avatarColor }">
            <text>{{ activity.author.substring(0, 1) }}</text>
          </view>
        </view>
        <view class="organizer-details">
          <view class="organizer-name">{{ activity.author }}</view>
          <view class="organizer-desc">{{ activity.organizerDesc }}</view>
        </view>
        <view class="follow-btn">
          <text>关注</text>
        </view>
      </view>

      <!-- 参与人数 -->
      <view class="participants-info">
        <view class="participants-count">
          <image src="/static/svg/users.svg" class="participants-icon" />
          <text>{{ activity.participants }}人已报名</text>
        </view>
        <view class="participants-avatars">
          <view 
            class="participant-avatar" 
            v-for="i in Math.min(5, activity.participants)" 
            :key="i"
            :style="{ background: getParticipantColor(i) }"
          >
            <text>{{ i }}</text>
          </view>
          <text v-if="activity.participants > 5" class="more-participants">+{{ activity.participants - 5 }}</text>
        </view>
      </view>
    </view>

    <!-- 活动详情 -->
    <view class="activity-detail">
      <view class="section-title">活动详情</view>
      <view class="detail-content">
        <text>{{ activity.description }}</text>
      </view>
      
      <!-- 活动亮点 -->
      <view class="highlights">
        <view class="section-title">活动亮点</view>
        <view class="highlight-item" v-for="(highlight, index) in activity.highlights" :key="index">
          <view class="highlight-icon">{{ index + 1 }}</view>
          <text class="highlight-text">{{ highlight }}</text>
        </view>
      </view>

      <!-- 注意事项 -->
      <view class="notice">
        <view class="section-title">注意事项</view>
        <view class="notice-item" v-for="(notice, index) in activity.notices" :key="index">
          <text>• {{ notice }}</text>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="action-left">
        <view class="action-btn favorite" @click="toggleFavorite">
          <image src="/static/svg/heart.svg" class="action-icon" />
          <text>收藏</text>
        </view>
        <view class="action-btn share" @click="shareActivity">
          <image src="/static/svg/share.svg" class="action-icon" />
          <text>分享</text>
        </view>
      </view>
      <view class="join-btn" @click="joinActivity">
        <text>立即报名</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 活动详情数据
const activity = ref({})

// 获取参与者头像颜色
const getParticipantColor = (index) => {
  const colors = ['#f0f8ff', '#e6f7ff', '#d6efff', '#c6e5ff', '#b6ddff']
  return colors[index % colors.length]
}

// 页面加载时获取活动详情
onMounted(() => {
  loadActivityDetail()
})

// 加载活动详情（根据URL参数获取数据）
const loadActivityDetail = () => {
  // 获取URL参数
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options
  const activityId = options.id || '1'
  
  // 模拟不同活动的数据
  const mockActivities = {
    '1': {
      id: '1',
      title: '大咖对谈·吴刚',
      author: '吴刚-高绩效人生',
      organizerDesc: '资深职场导师，畅销书作者',
      participants: 41,
      status: '报名中',
      statusColor: '#3de6e6',
      time: '2024年6月14日 周六 14:00-16:00',
      duration: '2小时',
      location: '文轩BOOKS九方店3楼活动区',
      price: '免费',
      avatarColor: '#e6f7ff',
      images: [
        { color: '#f0f8ff' },
        { color: '#e6f7ff' },
        { color: '#d6efff' }
      ],
      description: '本次活动将邀请知名职场导师吴刚老师，分享高绩效人生的秘诀。通过深度对谈的形式，探讨如何在快节奏的现代生活中保持高效率，实现个人价值最大化。活动包含互动问答环节，参与者可以直接向吴刚老师提问，获得个性化的职场建议。',
      highlights: [
        '知名导师面对面交流机会',
        '分享实用的职场提升技巧',
        '互动问答，解决个人困惑',
        '结识志同道合的伙伴'
      ],
      notices: [
        '请提前10分钟到场签到',
        '建议携带笔记本记录要点',
        '活动现场禁止录音录像',
        '如有紧急情况可联系主办方'
      ]
    },
    '2': {
      id: '2',
      title: '亲子瑜伽体验',
      author: '瑜伽导师-小美',
      organizerDesc: '国际认证瑜伽导师，专注亲子瑜伽教学',
      participants: 28,
      status: '进行中',
      statusColor: '#52c41a',
      time: '2024年6月15日 周日 10:00-11:30',
      duration: '1.5小时',
      location: '瑜伽馆A区亲子活动室',
      price: '￥68/家庭',
      avatarColor: '#f6ffed',
      images: [
        { color: '#f6ffed' },
        { color: '#e6f4ea' },
        { color: '#d6f3d6' }
      ],
      description: '亲子瑜伽是一种温馨的运动方式，让家长和孩子一起体验瑜伽的乐趣。通过简单的瑜伽动作，增进亲子感情，提高身体柔韧性和协调能力。适合3-12岁儿童与家长共同参与。',
      highlights: [
        '增进亲子感情的绝佳机会',
        '专业导师指导安全练习',
        '提升孩子身体协调能力',
        '学习实用的亲子互动技巧'
      ],
      notices: [
        '请穿着舒适的运动服装',
        '建议携带瑜伽垫和毛巾',
        '活动前2小时避免大量进食',
        '3岁以下儿童需家长全程陪同'
      ]
    },
    '3': {
      id: '3',
      title: '摄影技巧分享',
      author: '摄影师-张三',
      organizerDesc: '专业摄影师，擅长人像和风景摄影',
      participants: 67,
      status: '已结束',
      statusColor: '#d9d9d9',
      time: '2024年6月13日 周五 19:00-21:00',
      duration: '2小时',
      location: '摄影工作室多媒体教室',
      price: '￥99',
      avatarColor: '#fff7e6',
      images: [
        { color: '#fff7e6' },
        { color: '#ffe7ba' },
        { color: '#ffd591' }
      ],
      description: '从基础的相机操作到高级的构图技巧，本次分享会将全面介绍摄影的核心要点。无论你是摄影新手还是有一定基础的爱好者，都能从中获益。活动包含理论讲解和实拍练习。',
      highlights: [
        '系统学习摄影基础知识',
        '掌握实用的构图技巧',
        '现场实拍练习机会',
        '专业摄影师一对一指导'
      ],
      notices: [
        '建议携带自己的相机设备',
        '活动包含户外拍摄环节',
        '请根据天气情况准备合适服装',
        '拍摄作品可获得专业点评'
      ]
    }
  }
  
  // 根据ID获取对应的活动数据，如果没有找到则使用默认数据
  activity.value = mockActivities[activityId] || mockActivities['1']
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 切换收藏状态
const toggleFavorite = () => {
  uni.showToast({
    title: '收藏成功',
    icon: 'success'
  })
}

// 分享活动
const shareActivity = () => {
  uni.share({
    provider: 'weixin',
    scene: 'WXSceneSession',
    type: 0,
    href: '', // 分享链接
    title: activity.value.title,
    summary: activity.value.description,
    imageUrl: '', // 分享图片
    success: (res) => {
      uni.showToast({
        title: '分享成功',
        icon: 'success'
      })
    },
    fail: (err) => {
      uni.showToast({
        title: '分享失败',
        icon: 'none'
      })
    }
  })
}

// 报名参加活动
const joinActivity = () => {
  uni.showModal({
    title: '确认报名',
    content: '确定要报名参加这个活动吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: '报名成功',
          icon: 'success'
        })
      }
    }
  })
}
</script>

<style scoped>
.detail-page {
  background: #f5f5f5;
  min-height: 100vh;
}

/* 头部导航 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-btn, .share-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon, .share-icon {
  width: 20px;
  height: 20px;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 图片轮播 */
.image-container {
  height: 250px;
  background: #fff;
}

.swiper {
  height: 100%;
}

.swiper-item {
  height: 100%;
}

.placeholder-img {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #666;
}

/* 活动信息 */
.activity-info {
  background: #fff;
  margin-top: 10px;
  padding: 20px;
}

.main-info {
  margin-bottom: 20px;
}

.activity-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
}

.status-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.status-tag {
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}

.price {
  display: flex;
  align-items: center;
}

.price-label {
  font-size: 14px;
  color: #666;
}

.price-value {
  font-size: 20px;
  font-weight: bold;
  color: #ff4757;
  margin-left: 4px;
}

/* 时间地点信息 */
.time-location {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.info-icon {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.info-text {
  font-size: 16px;
  color: #333;
}

/* 主办方信息 */
.organizer-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.organizer-avatar {
  margin-right: 12px;
}

.avatar-circle {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.organizer-details {
  flex: 1;
}

.organizer-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.organizer-desc {
  font-size: 14px;
  color: #666;
}

.follow-btn {
  padding: 8px 16px;
  border: 1px solid #3de6e6;
  border-radius: 20px;
  color: #3de6e6;
  font-size: 14px;
}

/* 参与人数 */
.participants-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.participants-count {
  display: flex;
  align-items: center;
}

.participants-icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.participants-avatars {
  display: flex;
  align-items: center;
}

.participant-avatar {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-left: -5px;
  border: 2px solid #fff;
}

.more-participants {
  font-size: 12px;
  color: #666;
  margin-left: 8px;
}

/* 活动详情 */
.activity-detail {
  background: #fff;
  margin-top: 10px;
  padding: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.detail-content {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 30px;
}

.highlights {
  margin-bottom: 30px;
}

.highlight-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.highlight-icon {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: #3de6e6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  margin-right: 12px;
  margin-top: 2px;
}

.highlight-text {
  flex: 1;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}

.notice-item {
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 底部操作栏 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 15px 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.action-left {
  display: flex;
  align-items: center;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 30px;
}

.action-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

.action-btn text {
  font-size: 12px;
  color: #666;
}

.join-btn {
  background: #3de6e6;
  color: #fff;
  padding: 12px 30px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
}
</style> 